<template>
	<view class="content">
		<view class="place-time">
			<view class="place-time-tp">
				<view class="place-time-name">真实姓名</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.customer_name" disabled="disabled"  class="apply-text" />
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">手机号码</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.manage_mobile" placeholder="请输入手机号码" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">身份证号</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.manage_id_card" placeholder="请输入身份证号" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">有效期类型</view>
				<view class="place-time-con">
					<radio-group class="youxiaoqi" @change="id_card_change">
							<view>
								<radio  value="1" /><view>定期</view>
							</view>
							<view>
								<radio  value="2" /><view>长期</view>
							</view>
					</radio-group>
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">生效日期</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.manage_id_card_valid_begin" placeholder="身份证生效日期,格式:年-月-日" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">失效日期</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.manage_id_card_valid_end" placeholder="身份证失效日期,格式:年-月-日" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">详细地址</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.manage_detail_address" placeholder="请输入详细地址" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">邮箱</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.contact_email" placeholder="请输入邮箱" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">银行卡号</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.bank_card_no" placeholder="请输入卡号" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">开户行</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.bank_name" placeholder="请输入银行名称" class="apply-text" />
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">银行区划编码</view>
				<view class="place-time-con">
					<input type="text" v-model="formData.bank_region_code" placeholder="请输入银行区划编码" class="apply-text" />
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">门头照</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.shop_front_img">
						<image :src="app_url+formData.shop_front_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('shop_front_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('shop_front_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">店内场景</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.shop_env_img">
						<image :src="app_url+formData.shop_env_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('shop_env_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('shop_env_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">收银台</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.shop_cashier_img">
						<image :src="app_url+formData.shop_cashier_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('shop_cashier_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('shop_cashier_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">银行卡正面</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.bank_front_img">
						<image :src="app_url+formData.bank_front_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('bank_front_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('bank_front_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">银行卡背面</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.bank_back_img">
						<image :src="app_url+formData.bank_back_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('bank_back_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('bank_back_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">手持银行卡照片</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.bank_owner_hold_img">
						<image :src="app_url+formData.bank_owner_hold_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('bank_owner_hold_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('bank_owner_hold_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">身份证正面照片</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.manage_id_card_front_img">
						<image :src="app_url+formData.manage_id_card_front_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('manage_id_card_front_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('manage_id_card_front_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">身份证背面照片</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.manage_id_card_back_img">
						<image :src="app_url+formData.manage_id_card_back_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('manage_id_card_back_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('manage_id_card_back_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			<view class="feed">
				<view class="feed-tit">手持身份证照片</view>
				<view class="feed-con">
					<view class="apply-img" v-if="formData.manage_hold_id_card_front_img">
						<image :src="app_url+formData.manage_hold_id_card_front_img" mode="aspectFill" class="photo"></image>
						<image src="../../static/del.png" mode="widthFix" class="del" @click="delMediaFun('manage_hold_id_card_front_img', 'str', null, false)"></image>
					</view>
					<view class="apply-img" @click="uploadMediaFun('manage_hold_id_card_front_img', 'str', 'image', null,1)" v-else>
					  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
					</view>	
				</view>
			</view>
			
			
			
		</view>

		<view class="h110"></view>

		<view class="detail-sel">
			<view class="detail-btn" @click="saveFun">保存</view>
		</view>			
	</view>
</template>
<script>
	const app = getApp();
	const request = require('../../utils/request');
	export default {
		data() {
			return {
				/**
				 * 表单名称
				 */
				formData:{
					id:'', //id
					customer_name:'', //客户名称
					manage_id_card:'', //身份证号
					manage_id_card_valid_type:'', //有效期类型1=定期,2=长期
					manage_id_card_valid_begin:'', //生效日期
					manage_id_card_valid_end:'', //失效日期
					manage_mobile:'', //手机号
					manage_region_code:'', //经营者区划编码
					manage_detail_address:'', //地址
					contact_email:'', //邮箱
					bank_card_no:'', //卡号
					bank_name:'', //开户行
					bank_region_code:'', //银行区划编码
					shop_front_img:'', //门头照图片路径 
					shop_env_img:'', //店内场景照图片路径
					shop_cashier_img:'', // 收银台图片路径
					bank_front_img:'', //银行卡正面
					bank_back_img:'', //银行卡背面
					bank_owner_hold_img:'', //手持银行卡
					manage_id_card_front_img:'', //身份证正面
					manage_id_card_back_img:'', //身份证背面
					manage_hold_id_card_front_img:'', //手持身份证
				},
				app_url:app.globalData.app_url
			}
		},
		onLoad()
		{
			var that = this;
			that.load_bind_bank(); //获取技师支付宝账号信息
		},
		onShow()
		{
			
		},
		methods: {
			/**
			 * 获取技师支付宝账号信息
			 */
			load_bind_bank:function()
			{
				var that = this;
				//网络请求
				request(app.globalData.api_url+'/v1/bindbank/detail', 'POST', {}).then((res) => {
					if(res.data.code == 0)
					{
						that.formData = res.data.data;
					}else
					{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			/**
			 * 保存支付宝账号信息
			 */
			saveFun:function()
			{
				//console.log('保存支付宝账号信息');
				var that = this;
				var formData = that.formData;
				//网络请求
				request(app.globalData.api_url+'/v1/bindbank/save', 'POST', formData).then((res) => {
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					if(res.data.code == 0)
					{
						setTimeout(function(){
							uni.navigateBack();
						}, 1000);
					}else
					{
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			id_card_change:function(evt){
				this.formData.manage_id_card_valid_type = evt.detail.value;
				if(evt.detail.value == 1){
					console.log('定期');
				}
				if(evt.detail.value == 2){
					console.log('长期');
				}
			},
			
			/**
			 * 上传图片、视频方法
			 */
			uploadMediaFun:function(form_name, form_type, media_type, form_key,types)
			{
				var that = this;
				uni.chooseMedia({
					count:1,
					mediaType:[media_type],
					sourceType:['album', 'camera'],
					maxDuration:60,
					success:function(media_res)
					{
						//console.log(media_res);
						if(media_res.errMsg == "chooseMedia:ok")
						{
							uni.showLoading({
								title:'上传中...',
								mask:true
							});
							let tempFilePath = media_res.tempFiles[0]['tempFilePath'];
							//网络请求
							let url = '';
							switch(media_type)
							{
								//图片
								case 'image':
									url = app.globalData.api_url+'/v1/publics/upload_images';
								break;
								//视频
								case 'video':
									url = app.globalData.api_url+'/v1/publics/upload_video';
								break;
							}
							uni.uploadFile({
								url:url,
								filePath:tempFilePath,
								name:'file',
								formData:{
									'path':'techn',
									'types':types
								},
								success:function(res)
								{
									uni.hideLoading();
									let data = JSON.parse(res.data);
									if(data.code == 0)
									{
										//console.log(data);
										let form_name_val = that.formData[form_name];
										//console.log(form_name_val);
										//return false;
										switch(form_type)
										{
											//数组
											case 'arr':
												if(form_key != null)
												{
													form_name_val[form_key] = data.data.url;
													form_name_val = form_name_val;
												}else
												{
													form_name_val = form_name_val.concat(data.data.url);
												}
											break;
											//字符串
											case 'str':
												form_name_val = data.data.url;
											break;
										}
										//console.log(form_name_val);
										that.formData[form_name] = form_name_val;
										that.$forceUpdate();
									}else
									{
										uni.showToast({
											title:data.msg,
											icon:'none'
										});
									}
								}
							});
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
/* radio 选中后的样式 */
/deep/.uni-radio-input-checked{
	background-color: rgb(36,201,107)!important;
	border-color: rgb(36,201,107)!important;
	background-clip: content-box!important;
	box-sizing: border-box;
}
.content{
	.place-time{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			&:last-child{
				border-bottom: none;
				margin-bottom:0;
			}
			.place-time-name{
				flex: 1;
				font-size:28rpx;
			}
			.place-time-con{
				flex: 2.5;
				vertical-align: middle;
				text{
					&:first-child{
						font-size:28rpx;
						color: $uni-text-color-grey;
					}
					&.place-coupon{
						color: #ff0000;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}
				.apply-text{
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
				}
				.youxiaoqi{
					view{
						display: inline-block;
					}
				}
			}
		}
		.place-time-bt{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				text{
					&:first-child{
						font-size:28rpx;
						color:#ff0000;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}
	
			}
		}
		.place-km{
			margin-top:10rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.place-rem{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-rem-tit{
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.place-rem-con{
			display: flex;
			textarea{
				flex: 1;
				border-radius: 20rpx;
				font-size: 28rpx;
				padding: 20rpx;
				background-color:$uni-bg-color-grey;
			}
		}
	}
.feed{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.feed-tips{
			margin-top: 20rpx;
			font-size: 24rpx;
			color: rgb(118, 118, 118);
		}
		.feed-tip{
			font-size: 28rpx;
			color:rgb(118, 118, 118);
		}
		.feed-tit{
			font-size:28rpx;
			margin-bottom: 20rpx;
			text{
				color: #f00;
				margin-left: 10rpx;
			}
		}
		.feed-con{
			.apply-img{
			  width: 150rpx;
			  height: 150rpx;
			  overflow: hidden;
			  display: inline-block;
			  position: relative;
			  margin:10rpx 10rpx 0 0;
			}
			.photo{
			  width: 150rpx;
			  height: 150rpx;
			}
			.del{
			  width: 30%;
			  position: absolute;
			  right:5rpx;
			  top: 5rpx;
			}
			.feed-text{
				padding:20rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
				background-color: $uni-bg-color-grey;
			}
			.feed-input{
				margin: 20rpx 0 0;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background-color: $uni-bg-color-grey;
			}
			text{
				width: 31%;
				height: 60rpx;
				font-size: 28rpx;
				margin: 10rpx 18rpx 10rpx 0;
				line-height: 60rpx;
				border-radius:30rpx;
				display: inline-block;
				text-align: center;
				background-color: $uni-bg-color-grey;
				&:nth-child(3n){
					margin: 10rpx 0 10rpx 0;
				}
				&.feed-act{
					color: #fff;
					background-color: $uni-text-color-active;
				}
			}
		}
	}
	.detail-sel{
		padding: 20rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		text-align: center;
		.detail-btn{
			height:70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			color: #fff;
			font-size: 28rpx;
			background-color:$uni-text-color-active;
		}
	}
	.h110{
		width: 100%;
		height:110rpx;
	}
}
</style>